<template>
  <div class="role-edit">
    <el-dialog :model-value="dialogFormVisible" :title="roleEditForm.id == 0 ? '添加角色' : '编辑角色'" @close="cancelFn">
      <el-form :model="roleEditForm">
        <el-form-item label="角色名称:" label-width="100px">
          <el-input v-model="roleEditForm.name" autocomplete="off" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="描述:" label-width="100px">
          <el-input v-model="roleEditForm.description" rows="5" resize="none" type="textarea" autocomplete="off"
            placeholder="请描述一下该角色" />
        </el-form-item>
        <el-form-item label="是否启用:" label-width="100px">
          <el-radio-group v-model="roleEditForm.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import * as http from '@/request/http';

const props = withDefaults(defineProps<{
  dialogFormVisible: boolean,
  roleEditForm: IRoleModel,
}>(), {
  dialogFormVisible: false,   // 默认值
})

const emits = defineEmits<{
  (e: 'cancel'): void;
  (e: 'confirm'): void;
}>();

// 添加 的 二次确定
const addSureFn = () => {
  ElMessageBox.confirm(
    '此操作将添加角色信息,是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 添加角色
    http.role.createRole({
      name: props.roleEditForm.name,
      description: props.roleEditForm.description,
      status: props.roleEditForm.status,
    }).then(res => {
      if (res.code === 200) {
        // 提示用户 修改成功
        ElMessage.success('添加角色成功');
        emits('confirm');  // 调用confirm自定义事件  父组件监听confirm自定义事件 执行相应回调函数  并关闭窗口
      }
    })

  }).catch(() => {
    ElMessage.warning('取消添加');
  })
}

// 编辑 的 二次确认
const editSureFn = () => {
  ElMessageBox.confirm(
    '此操作将修改当前角色信息,是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 修改角色
    http.role.updateRoleById(props.roleEditForm).then(res => {
      if (res.code === 200) {
        // 提示用户 修改成功
        ElMessage.success('修改角色成功');
        emits('confirm');  // 调用confirm自定义事件  父组件监听confirm自定义事件 执行相应回调函数  并关闭窗口
      }
    })

  }).catch(() => {
    ElMessage.warning('取消修改');
  })
}

// 点击 取消  触发自定义事件 cancel
const cancelFn = () => {
  emits('cancel');
}

// 点击 确定 触发自定义事件 confirm
const confirmFn = () => {
  // 判断 当前是添加操作 还是 编辑操作
  if (props.roleEditForm.id === 0) {
    // 执行 添加的二次确认逻辑
    addSureFn();
  } else {
    // 执行 编辑的二次确认逻辑
    editSureFn();
  }
}

</script>

<style scoped lang="less"></style>